<template>
  <div class="test">
    <button @click="disAll">{{ dis }}</button>
    <br />
    <span>所在城市:</span>
    <select v-model="city">
      <option
        :disabled="isTrue"
        v-for="(item, index) in cityList"
        :value="item.name"
        :key="index"
      >
        {{ item.name }}
      </option>
    </select>
    <br />
    用户名：<input type="text" v-model="username" :disabled="isTrue" />
    <br />
    年龄: <input type="number" v-model="age" :disabled="isTrue" />
    <br />
    <button :disabled="isTrue" @click="add">{{ addBtn }}</button>

    <button @click="create">搜索</button>

    <button @click="sortAll(up)">年龄排序</button>
    <button @click="citySort">城市排序</button>
    <table border="1" cellspacing="0" width="800">
      <tr>
        <th></th>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>地区</th>
        <th>操作</th>
      </tr>
      <tbody>
        <tr
          align="center"
          v-for="(item, index) in goodsInfo"
          :key="index"
          class="ccc"
        >
          <td>
            <input
              type="checkbox"
              :disabled="isTrue"
              :value="index"
              v-model="checkedArr"
            />
          </td>
          <td>{{ item.id }}</td>
          <td>{{ item.username }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.city }}</td>
          <td>
            <button :disabled="isTrue" @click="change(index)">修改</button>
            <button :disabled="isTrue" @click="del(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button :disabled="isTrue" @click="delAll">删除所选</button>
  </div>
</template>

<script>
import cityList from "@/assets/data.json";
export default {
  name: "test",
  data() {
    return {
      cityList: cityList.data,
      dis: "锁定",
      isTrue: false,
      username: "",
      age: "",
      city: "",
      addBtn: "提交",
      goodsInfo: [],
      goodsInfoAll: [],
      num: 1,
      currentIndex: 0,
      checkedArr: [],
      time: 4,
      up: false,
      array: [],
    };
  },
  mounted() {
    this.goodsInfo = this.goodsInfoAll;
  },
  methods: {
    add() {
      let obj = {
        id: this.num,
        username: this.username,
        age: this.age,
        city: this.city,
      };
      if (this.addBtn == "提交") {
        this.num++;
        this.goodsInfo.push(obj);
      } else {
        obj.id = this.goodsInfo[this.currentIndex].id;
        this.goodsInfo.splice(this.currentIndex, 1, obj);
        this.addBtn = "提交";
      }
      this.username = "";
      this.age = "";
      this.city = "";
    },
    del(index) {
      this.goodsInfo.splice(index, 1);
    },
    change(index) {
      let data = this.goodsInfo[index];
      this.username = data.username;
      this.age = data.age;
      this.city = data.city;
      (this.addBtn = "确认修改"), (this.currentIndex = index);
    },
    delAll() {
      this.checkedArr
        .sort((a, b) => {
          return b - a;
        })
        .forEach((item) => {
          this.goodsInfo.splice(item, 1);
        });
      this.checkedArr = [];
    },
    disAll() {
      if (this.dis == "锁定") {
        let timer = setInterval(() => {
          this.time--;
          this.dis = this.time + "秒后解锁...";
          this.isTrue = true;
          if (this.time == 0) {
            clearInterval(timer);
            this.dis = "解锁";
            this.time = 3;
          }
        }, 1000);
      } else {
        this.isTrue = false;
      }
    },
    //筛选
    create() {
      let _arr = this.goodsInfo.filter((item) => {
        // return this.username == -1 ? true : this.username == item.username;
        return (
          (!this.username ? true : item.username.includes(this.username)) &&
          (!this.age ? true : item.age.includes(this.age)) &&
          (!this.city ? true : item.city.includes(this.city))
        );
      });

      this.goodsInfo = _arr;
    },
    //年龄排序
    sortAll(up) {
      if (!up) {
        this.goodsInfo = this.goodsInfo.sort((a, b) => {
          return a.age - b.age;
        });
        this.up = true;
      }
      if (up) {
        this.goodsInfo = this.goodsInfo.sort((a, b) => {
          return b.age - a.age;
        });
        this.up = false;
      }
    },
    //城市排序
    citySort() {
      this.goodsInfo.sort((a, b) => {
        let arr = a.city;
        let arr2 = b.city;
        return arr.localeCompare(arr2);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.test {
  .active {
    background-color: #ccc;
  }
  .ccc:nth-child(odd) {
    background: #cecece;
  }
  .ccc:nth-child(even) {
    background: pink;
  }
}
</style>